<template>
  <div class="exam-result clear">
    <div v-if="is_none">
      <div class="result-list">
        <div class="item">
          <p class="name">王京雨，您是</p>
          <p class="type">您的属性</p>
          <p class="type-details"><img src="@/assets/chengrenceshi02.png" alt=""><span>木+水属性</span></p>
          <p class="result-cons">你本质上是重感情，讲义气的人，所以注重承诺，对人忠诚，正义刚强 ；同时又是一个集温和、谦和、平和于一身的人，追求稳定安全和归属感。</p>
        </div>
        <div class="item pb0">
          <p class="type-name">属性解说</p>
          <div class="work" :class="(is_type ? 'active' : '')">
            <p class="type-img img"><img src="@/assets/chengrenceshi03.png" alt=""></p>
            <p class="title">1、工作</p>
            <p class="cons">你比较厌烦没有创造性的工作，或不给你的空间留下个人的印记。喜欢变动、多样性、兴奋和创新，能以直觉和创造性带领工作，擅长争取其他人的支持，并以个人风格和深度来丰富自己的工作，但有时会缺乏跟进。你经常知道最新的趋向和潮流，寻找新的可能性和选择，但却有时候会冲动不专注。</p>
            <p class="title">2、人际</p>
            <p class="cons">过分情绪化，容易沮丧或消沉，对人若即若离，怕亲密的关系令人发现自己不完美就会离自己而去，经常觉得生命是一个悲剧。很多人眼中，你有点“艺术家脾气”，自我沉醉，自怜自恋、觉得自己与其他人不一样、喜欢沉醉于自己的想象世界。</p>
            <p class="title">3、生活</p>
            <p class="cons">多才多艺、对玩乐的事非常熟悉亦会花精力钻研，不惜任何代价追求快乐和新鲜，惯用嬉笑怒骂的方式对人对事。</p>
          </div>
          <div class="more" @click="is_type = !is_type" v-if="!is_type">
            <span>查看更多</span>
            <img src="@/assets/chengrenceshi05.png" alt="">
          </div>
          <div class="more" @click="is_type = !is_type" v-else>
            <span>收回列表</span>
            <img src="@/assets/chengrenceshi09.png" alt="">
          </div>
        </div>
        <div class="item pb0">
          <p class="type-name">能量形态</p>
          <div class="work">
            <p class="energy-img img"><img src="@/assets/chengrenceshi06.png" alt=""></p>
            <p class="title">1、工作</p>
            <p class="cons">你比较厌烦没有创造性的工作，或不给你的空间留下个人的印记。喜欢变动、多样性、兴奋和创新，能以直觉和创造性带领工作，擅长争取其他人的支持，并以个人风格和深度来丰富自己的工作，但有时会缺乏跟进。你经常知道最新的趋向和潮流，寻找新的可能性和选择，但却有时候会冲动不专注。</p>
            <p class="title">2、人际</p>
            <p class="cons">过分情绪化，容易沮丧或消沉，对人若即若离，怕亲密的关系令人发现自己不完美就会离自己而去，经常觉得生命是一个悲剧。很多人眼中，你有点“艺术家脾气”，自我沉醉，自怜自恋、觉得自己与其他人不一样、喜欢沉醉于自己的想象世界。</p>
            <p class="title">3、生活</p>
            <p class="cons">多才多艺、对玩乐的事非常熟悉亦会花精力钻研，不惜任何代价追求快乐和新鲜，惯用嬉笑怒骂的方式对人对事。</p>
          </div>
          <div class="more">
            <span>查看更多</span>
            <img src="@/assets/chengrenceshi05.png" alt="">
          </div>
        </div>
        <div class="item pb0">
          <p class="type-name">意识形态</p>
          <div class="work">
            <p class="consciousness-img img"><img src="@/assets/chengrenceshi07.png" alt=""></p>
            <p class="title">1、工作</p>
            <p class="cons">你比较厌烦没有创造性的工作，或不给你的空间留下个人的印记。喜欢变动、多样性、兴奋和创新，能以直觉和创造性带领工作，擅长争取其他人的支持，并以个人风格和深度来丰富自己的工作，但有时会缺乏跟进。你经常知道最新的趋向和潮流，寻找新的可能性和选择，但却有时候会冲动不专注。</p>
            <p class="title">2、人际</p>
            <p class="cons">过分情绪化，容易沮丧或消沉，对人若即若离，怕亲密的关系令人发现自己不完美就会离自己而去，经常觉得生命是一个悲剧。很多人眼中，你有点“艺术家脾气”，自我沉醉，自怜自恋、觉得自己与其他人不一样、喜欢沉醉于自己的想象世界。</p>
            <p class="title">3、生活</p>
            <p class="cons">多才多艺、对玩乐的事非常熟悉亦会花精力钻研，不惜任何代价追求快乐和新鲜，惯用嬉笑怒骂的方式对人对事。</p>
          </div>
          <div class="more">
            <span>查看更多</span>
            <img src="@/assets/chengrenceshi05.png" alt="">
          </div>
        </div>
      </div>
      <div class="dinzhi"><img src="@/assets/chengrenceshi08.png" alt=""></div>
      <div class="fixed"><span class="btn">定制方案</span></div>
    </div>
    <div class="none" v-else>
      <p class="title">抱歉，测试无结果</p>
      <p class="p-cons">内心缺乏自信，纠结困惑，总觉得事情的发展没有按自己的意愿进行，眼前所见总是灰色一片，感觉不到生命的色彩和乐趣。此时的你不适合做任何决定，应该努力地从回忆过去曾经的美好找到信心，再低头想想自己的责任，努力地寻求力量的填充。如果是自己的身体或是家人的身体出现了比较不好的状态，也要努力地相信总有解决办法的时候。</p>
      <span class="btn">重新测试</span>
    </div>
  </div>
</template>

<script>


  export default {
    components: {
    },
    data () {
      return {
        is_type: false,
        is_none: false
      }
    },
    created () {
    },
    methods: {
    }
  }
</script>

<style lang="stylus" scoped>
.exam-result
  min-height 100vh
  min-width 100vw
  background-color #f5f5f5
  .result-list
    padding-top 8rem
    background-image url('../../assets/chengrenceshi01.png')
    background-repeat no-repeat
    background-size 100%
    width 100%
    .item
      width 92%
      margin-left 4%
      border-radius .3rem
      background-color #fff
      padding 2rem 1.6rem
      box-sizing border-box
      margin-bottom 1rem
      .name
        color #333
        font-weight bold
        font-size 1.8rem
      .type
        font-size 1.2rem
        color #333
        height 1.2rem
        line-height 1.2rem
        margin-top 3.2rem
        text-align center
      .type-details
        text-align center
        margin 1rem 2.2rem
        padding-bottom 1.5rem
        border-bottom 1px solid #e6e6e6
        img
          width 3.25rem
          display inline-block
          vertical-align middle
        span
          font-size 1.8rem
          color #172F6D
          font-weight bold
          display inline-block
          vertical-align middle
          margin-left .5rem
      .result-cons
        font-size 1.3rem
        line-height 2.4rem
        color #333
      .type-name
        font-size 1.7rem
        height 1.7rem
        line-height 1.7rem
        font-weight 500
        position relative
        &::after
          content ''
          position absolute
          left -1.6rem
          width .3rem
          height 100%
          background-color #172F6D
      .active.work
        height auto
        transition all 1.5s
      .work
        margin-top 2.5rem
        height 21rem
        overflow hidden
        .img
          position relative
          left 50%      
        .type-img
          width 11.8rem
          margin-left -5.9rem
          margin-bottom 2rem    
        .title
          font-size 1.5rem
          color #172F6D
          line-height 1.5rem
          height 1.5rem
          margin-bottom 1rem
          font-weight 500
        .cons
          font-size 1.3rem
          color #333
          line-height 2.4rem
          margin-bottom 1.8rem
        .energy-img
          width 18rem
          margin 4rem 0
          margin-left -9rem
        .consciousness-img
          width 13.4rem
          margin 2rem 0
          margin-left -6.7rem
      .more
        width 100%
        border-top 1px solid #e6e6e6
        height 4rem
        line-height 4rem
        text-align center
        span
          color #172F6D
          font-size 1.2rem
          display inline-block
          vertical-align middle
          font-weight 500
        img
          width 1rem
          display inline-block
          vertical-align middle
          margin-left .5rem
    .pb0
      padding-bottom 0
  .dinzhi
    margin-top 3rem
    margin-bottom 6.7rem
    width 78%
    margin-left 11%
  .fixed
    background-color #fff
    padding .75rem 1.5rem
    position fixed
    bottom 0
    height 5.5rem
    width 100%
    box-sizing border-box
    box-shadow 1px 3px 7px rgba(0,0,0,.2)
    .btn
      line-height 4rem
      height 4rem
      width 100%
      background-color #172F6D
      color #fff
      font-size 1.5rem
      font-weight 500
      display block
      text-align center
      border-radius 100px
  .none
    .title
      font-size 1.8rem
      font-weight bold
      line-height 1.8rem
      height 1.8rem
      position absolute
      width 100%
      text-align center
      top 9.6rem
    .p-cons
      position absolute
      font-size 1.3rem
      line-height 2.4rem
      color #666
      width 80%
      margin-left 10%
      top 14.2rem
    .btn
      width 80%
      position absolute
      left 10%
      top 33.6rem
      height 5rem
      line-height 5rem
      text-align center
      font-size 1.7rem
      font-weight bold
      color #fff
      background-color #152D6F;
      border-radius 100px
</style>
